﻿/*nstctrain2023*/
	/*reset css*/
	body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, blockquote, th, td {	margin: 0;padding: 0;}
	img {border: 0;}
	:focus {outline: 0;}
	h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;}
	input, button, textarea, select, optgroup, option {font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;}
	code, kbd, samp, tt {font-size: 100%;}

	/*purpose To enable resizing for IE */
	/*branch For IE6-Win, IE7-Win */
	/*	input*/
	button, textarea , input[type="submit"], input[type="button"]  { -webkit-appearance: none;  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */ -moz-appearance: none; /* FireFox */ appearance: none;}
	ol, ul, li {list-style: none;}
	:link, :visited , ins {text-decoration: none;}
	blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}

	/*HTML5 tag*/
	section, article, aside, footer, header, nav, main {display:block;}

	/*HTML5 display-role reset for older browsers*/
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
	ol, ul {list-style: none;width: 100%;float:left;}
	blockquote, q {quotes: none;}
	blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
	table {border-collapse: collapse; border-spacing: 0;}

	/*general*/
	html, body {height: 100%;width: 100%;}
	body {background:#fff;color:#202020;font:1em "Microsoft JhengHei","sans-serif","Arial";line-height: 25px;margin:0;width:100%;cursor:default;position:relative;}
	div , p , table { padding:0;margin:0;width: 100%;float:left;}
	p {margin:5px 0;}

/*title*/
	h1, .home-title, .posting-title, .list-title , .post-title , #catalog_display h1 span , #main_info span , .emailtitle , #albumdetail .main-title , #menu-name , .reg-search-title {
		margin:15px 0 15px;
		width:100%;
		font-size:2.5em;
		line-height:150%;
		color:#ff84bc;
		font-weight:bold;
		text-align:center;
		float:left;
	}
	
	h1 span, #menu-name span , .reg-search-title span {font-size:0.8em;line-height:150%;width:100%;float:left;}
	
	h2 {
		margin:5px 0 10px;
		width:100%;
		font-size:1.75em;
		line-height:140%;
		color:#003e8b;
		font-weight:bold;
		text-align:center;
		float:left;
	}
	
	h3 {
		margin:5px 0;
		width:100%;
		font-size:1.5em;
		line-height:140%;
		color:#b07cda;
		font-weight:bold;
		text-align:center;
		float:left;
	}

	h4 {
		margin:5px 0;
		width:100%;
		font-size:1.25em;
		line-height:130%;
		color:#005400;
		font-weight:bold;
		text-align:center;
		float:left;
	}
	
	h5 {
		padding:0 0;
		margin:10px 0 ;
		width:100%;
		font-size:1.12em;
		line-height:130%;
		color:#5f5f5f;
		font-weight:bold;
		float:left;
	}
	
	
	/*link*/
	a {color: #77cfff;font-weight:900;-webkit-transition: color .5s, background .5s;transition: color .5s, background .5s;cursor:pointer;}
	a:hover {color:#003e8b;}
	a img {opacity: 1;}
	a img:hover {opacity: .8;-webkit-transition: opacity .5s;transition: opacity .5s;}
	img:hover {opacity: .8;-webkit-transition: opacity .5s;transition: opacity .5s;}
	.logolink a img:hover , #flash-box img:hover , #cart-content img:hover , #member img:hover , .footer-info  img:hover {opacity: 1;}

	.printer , hr {display:none;}

	/*ul*/
	ul {width:100%;float:Left;}
	ul li {margin:0 5px;}
	.maincontent ul li {float:left;}

	/*iframe img*/
	iframe {margin: 10px 0;max-width: 100% !important;}
	img {height: auto ;max-width: 100%;width: 100%;float:left;}

	/*input*/
	input, textarea {
		padding:8px 5px; 
		border:none; 
		border-radius:10px;
		float:left; 
	}
	
	input[type="submit"] , input[type="button"] {
		width:calc(100% - 0px); 
		color:#fff; 
		background: #ff84bc;
		cursor: pointer;
		-webkit-transition: background .5s;
		transition: background .5s; 
		box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
	}
	
	input[type="submit"]:hover , input[type="button"]:hover {
		background:#b07cda; 
		border:none;
	}
	
	input[type="text"] , input[type="textbox"] , input[type="password"] , 
	input[type="email"] , textarea  {
		width:calc(100% - 14px); 
		color:#5f5f5f;	
		border:2px solid #9fa0a0; 
		background: #fff;
	}
		
	textarea {height:100px;}
	
	input[type="radio"] ,	input[type="checkbox"] {
		margin:5px 5px 5px 0;
		width:15px;
		height:15px;
	}
	
	select { 
		padding:8px 5px;
		width:calc(100% - 0px); 
		color:#5f5f5f;   
		border:none; 
		border-radius:10px;
		background: #fff;		
		border:2px solid #9fa0a0; 
		float:left;
	}
	
	#catalog_detail select {
		margin:0 5px;
		width:calc(100% - 10px);
	}
	
			
	/*pageselection*/
	#page-top {margin-bottom:25px;display:none;}
	#page-bottom {margin-top:25px;}

	.pageselection ul {width:100%;float:left;text-align:center;}
	.pageselection ul li {display:inline-block;margin:5px;float:none;}
	.pageselection ul li a {display:block;padding:0 5px;}
	.pageselection li.activepage {color:#fff;font-weight:900;background:#999999;padding:0 5px;border-radius:2px;}
	.pageselection li a:hover {text-decoration:underline;}

	.pageselection ul li.page-word  {display:none;}
	
	/*messagebox*/
	.messagebox {text-align:Center;width:50%;margin:0 25% 15px;}
	
	.messagebox_title , .messagebox_content {display:none;}
	
	/*pop up*/
	#grayBG1 {position:fixed; z-index:999; background:rgba(0,0,0,.8);top:0; left:0; width:100%; height:100%;}
  #LightBox1.box_content {z-index:1000; width:250px; line-height:20px; padding:20px 25px; background:#fff; color:#343434; text-align:center; position:fixed; left:calc(50% - 150px); top:25vh; margin-left:0;}
	
	#LightBox1.box_content ul {padding:0; margin:0; margin-top:15px;}
	#LightBox1.box_content ul li {padding:0; margin:0;width:100%;}
	#LightBox1.box_content ul li a {font-weight:500;padding:5px 10px;width:80px;margin:0 calc(50% - 50px);float:left;color:#fff;	background: #cccccc;border:2px solid #cccccc;border-radius:2px;}
	#LightBox1.box_content ul li a:hover {background:#999999;border:2px solid #999999;}

	#LightBoxContent {min-height:50px; padding-top:15px;}
	
	.box_content a {text-decoration:none;}
	
	#LightBoxContent .message {font-weight:900;}
	.warning {display:none;}
	
	/*frame layout*/
	#artboard {background: #fff url(graphics/home-bg.webp) no-repeat center top; background-size:100%; }
		
	/*header*/
	#header {background:#003e8b; border-bottom:2px solid #f2f2f2;}
	
	
	/*logolink*/
	.logolink {width:350px;margin:15px calc(50% - 175px) 5px;}
	.logolink a {width:100%;padding:0px;float:left;}
	
	/*mainmenu*/
  #mainmenu {width:1200px;margin:0 calc(50% - 600px);padding:0;}
	#mainmenu > ul {text-align:center;}
	#mainmenu ul li {margin:0;padding:0;display:inline-block;position:relative;}
	#mainmenu ul li a {float:left;font-weight:900;color:#fff;padding:15px 15px;text-transform:uppercase;text-shadow: 2px 2px 5px rgba(0, 0, 0, .9);}
	#mainmenu ul li a:hover {color: #b0d6e3;}
	#mainmenu ul li a.mainmenuactive , #menu li a.activearrow {}
	
	#mainmenu ul li a span {width:100%; float:left; }
	
	#mainmenu ul li#menu14330 {display:none;}
	
	/*maincontent*/
	.maincontent {
		padding:0 0px 20px; 
		margin:30px calc(50% - 600px) 30px;
		width:1200px; 
		min-height:64vh; 
		color:#5f5f5f;
		background:#fff;
	}
	
			
	/*footer*/
	#footer {
		width:1200px;
		padding:15px calc(50% - 600px) 20px; 
		background:#fff url(graphics/copyright.webp) left bottom no-repeat;
		background-size:100%;
		border-top:3px solid #ececec;
	}

	#footer-body {
		background: url(graphics/footer.webp) right 5% top no-repeat;
		background-size:400px auto;
	}
			
	#footer ul {margin:10px 0;}
	#footer ul li {width:100%; margin:0 0 10px; float:left;}
	#footer ul li > span {width:100%; margin:5px 0; float:left; font-weight:bold;}
	#footer ul li > p {width:100%; float:right;}
	#footer ul li a {color: #004e86;}
	#footer ul li a:hover {text-decoration:underline;}
	
	#footer ul li .uloppen {margin:0;}
	#footer ul li .uloppen > span {width:75px; float:left; font-weight:bold;}
	#footer ul li .uloppen > img {width:20px; float:left; position:relative; top:7px;}
	#footer ul li img[alt="openarrow"] {float:left;}
	#footer ul li img[alt="closearrow"] {display:none;}

	#footer ul li .flipopen img[alt="closearrow"] {display:block;}
	#footer ul li .flipopen img[alt="openarrow"] {display:none;}
	
	#footer ul li .spon-info {display:none;}
	#footer ul li .spon-info li {width:50%;}
	#footer ul li .spon-info li:nth-child(3) {width:100%;}
		
	
	/*copyright*/
	.copyright {
		padding:5px 0 0;
		margin:35px 0 0; 
		width:100%;
		font-size:0.75em;
		text-align:center;
	}	
	
	.copyright a , .copyright span a {color:#ff84bc;}
	
	.copyright a:hover , .copyright span a:hover {color: #5f5f5f;}
	
	.copyright p {
		margin:0 0;
		width:100%;
	}
	
	
	/*home*/
	#home .maincontent {background:none;}

	/*flash-box*/
	#flash-box {margin:0 0 10px;}
	.nivo-prevNav  ,.nivo-nextNav {display:none !important;}

	.defaultimg {display:none;width:100%;float:right;}
	#slider {}

	.theme-default {width:100%;position:relative;}
	.theme-default .nivoSlider {margin:0 !important;}
	.theme-default .nivo-controlNav {display:none; position:absolute;bottom:30px;line-height:16px;float:left;text-align:center;z-index:99;padding:0 0 8px !important;}
	.theme-default .nivo-controlNav a {width:12px !important;height:12px !important;background:#cccccc !important;box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);border-radius:50%;margin:0 10px !important;}
	.theme-default .nivo-controlNav a.active {background:#999999 !important;}
		
	/*home-info*/
	.home-info {width:calc(100% - 40px); padding:15px 20px;margin:10px 0; }
	
	.indent {width:30px; float:left;}
	.redtxt {width:auto; color:#b07cda;	background: #faf8fb;}
		
	.home-info ul {}
	.home-info ul li {width:calc(100% - 20px); padding:0 0 0 20px; margin:0 0 10px;background: url(graphics/li.png) no-repeat top 5px left; background-size:15px;}
	
	.home-info ol {margin:0 0 15px;}
	.home-info ol li {list-style-type: cjk-ideographic; list-style-position: inside; margin:0 0 10px;}
	.home-info ol.english-ol li {list-style-type:decimal; list-style-position: inside; margin:0 0 10px; }
	.home-info ol li ol {width:calc(100% - 30px); margin:10px 0 0 30px;}
	.home-info ol li ol li {list-style-type: decimal;}
	.home-info ol.english-ol li ol li {list-style-type:Lower-alpha;}
	.home-info ol li p {width:calc(100% - 30px); margin:5px 0 0 30px;}
	
	.home-info li a {text-decoration:underline;}
	
	.soon-regesiter {width:250px; padding:15px 5px; margin:10px calc(50% - 130px); color:#fff;	background: #ff84bc; border-radius:10px; float:left; text-align: center; font-size:1.12em; box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);}
	.soon-regesiter:hover {background:#004e86; border:none; color:#fff;}
	
	.home-info .open-english {width:700px; margin:15px calc(50% - 350px); font-size:2em;line-height:150%;color:#5f5f5f;font-weight:bold;}
	.home-info .open-english > span {width:calc(100% - 30px); float:left; font-weight:bold;}
	.home-info .open-english > img {width:30px; float:left; position:relative; top:15px;}
	.home-info .open-english img[alt="openarrow"] {}
	.home-info .open-english img[alt="closearrow"] {display:none;}

	.home-info .flipopen img[alt="closearrow"] {display:block;}
	.home-info .flipopen img[alt="openarrow"] {display:none;}
	
	.home-info .english-info {display:none;}

	/*home-video*/
	.home-video {margin:10px 0;}
	
	.home-video iframe {width:calc(50% - 20px) !important;margin:0 10px; float:left;}

	/*news-list*/
	#news-list {width:calc(100% - 40px); padding:15px 20px;}
	.news-list-content {margin:0 0 10px;}
	
	#news-list-top {display:none;}
	#postingNotice {width:calc(100% - 60px); padding:20px 30px 30px; margin:15px 0 30px; background: #f2f2f2; border-radius:2px; display:none;}
	
	.listing-title , .listing-ul .new , .listing-ul .icon , .listing-ul .upc-brief , .listing-ul .upc-picture , .listing-ul .upc-date {display:none;}
	
	.listing-ul {border-bottom:2px solid #cccccc;}
	.listing-ul li {width:calc(20% - 10px); padding:10px 5px; margin:0;}
	
	.listing-ul li.upc-subject {width:calc(100% - 170px);}
	.listing-ul li.upc-subject a {width:100%; margin:5px 0; float:left;}
	
	.listing-ul li.upc-more {width:150px;}	
	.listing-ul li.upc-more a {width:calc(100% - 10px);text-align:center;padding:5px;float:left;color:#fff;background: #98c8de;border-radius:2px;font-weight:normal;box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);}
	.listing-ul li.upc-more a:hover {background:#004e86;}
		
	/*news-content*/
	.post-title {display:none;}
	
	/*register-ul*/
	.register-ul {width:600px; margin:0 calc(50% - 300px);}
	.register-ul li {width:calc(100% - 20px); padding:0 0 0 20px; margin:0 0 10px;background: url(graphics/li.png) no-repeat top 5px left; background-size:15px;}
	
	/*download-ul*/
	.download-ul {width:600px; margin:10px calc(50% - 300px) 10px;}
	.download-ul li {width:calc(100% - 20px); padding:0 0 0 20px; margin:0 0 10px;background: url(graphics/li.png) no-repeat top 5px left; background-size:15px;}
	.download-ul li a {width: calc(100% - 10px); padding:0 5px; text-decoration:underline;	/*background: #98c8de; border-radius:2px;*/ float:left;}
	.download-ul li a:hover {text-decoration:underline;}
	
	.download-ul li a img {width:25px;margin:0 10px 0 0; float:left;}
	
	/*register-form*/
	#register-form {width:600px; margin:0px calc(50% - 300px);}
	
	.register {margin:10px 0;}
	.register > div {padding:5px 0 8px;border-bottom:2px solid #cccccc; }
	.register .cell1 {width:100%;margin: 0 0 5px;font-weight:900;}	
	.register .cell2 {width:100%;}		
	.radiodiv {width:auto;}
	.register #reg-wf1380 , .register #reg-wf1381  {display:none;}

	.register #reg-wf1391:before {width:calc(100% - 10px); float:left; padding:5px; margin:10px 0 5px; font-weight:bold; background:#faf8fb; color: #b07cda; text-align:center; content:'因應 112 學年度及 113 學年度部分學校之行政人事異動，請填寫可作為第二聯繫窗口之資訊 / Please provide second contact information in case of administrative staff changes in the 2023-2024 or 2024-2025 academic year.';}
	.register #reg-wf1390:after {width:100%; float:left; padding:5px 0; margin:5px 0 5px; font-weight:bold; background:#faf8fb; color: #b07cda; text-align:center; content:'若勾選是，實驗活動將優先以英文進行教學 / Where activities will primarily be conducted in English';}
	
	.search-group > div {margin:5px 0 0;}

	#notice {color:#BF5743; font-weight:900;}
	
	.main-button {margin:10px 0;}
	.main-button .cancel {width:150px;}
	.main-button .cancel a {width:calc(100% - 10px);padding:6px 5px; border-radius:10px;color:#fff;	background: #003e8b;cursor: pointer;-webkit-transition: background .5s;transition: background .5s; text-align:center; float:left;font-weight:normal;box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);}
	.main-button .cancel a:hover {background:#77cfff;}
	.main-button .submit {width:150px; float:right;}
	
	#formmsg {
		padding: 15px 0;
		margin:15px calc(50% - 300px);
		width:600px;
		color: #fff;
		background:#c23e3c;
		font-size: 1.5em;
		font-weight:900; 
		text-align:center;
	}
	
	
	/*register-list*/
	.register-list {margin:10px 0;}
		
	.register-list > div {padding:5px 0; border-bottom:2px solid #cccccc; }
	
	.register-list .cell1 {width:100%;margin: 0 0 5px;font-weight:900;}	
	.register-list .cell2 {width:100%;}		
	
	.maincontent .message {width:600px; padding:10px 0; margin:25px calc(50% - 300px) 0px; font-size:1.25em; font-weight:bold; background:#ceebf9; color: #004e86; text-align: center;}

	/*reg-searc*/
	.reg-searc {}
	
	.reg-search-content {width:600px; margin:0 calc(50% - 300px);}
	
	.search-content-id {}	
	.search-content-engine {}
	.search-content-id input , .search-content-engine input {border:2px solid #cccccc; width:calc(100% - 14px); margin:5px 0; color:#999999;	background: #fff;}

	.search-content-button {margin:10px 0; /*width:150px; margin:10px calc(50% - 75px);*/}
	
	.register-search #reg-wf1380 , .register-search #reg-wf1381 {display:block;}

	/*daytable*/
	.uloppen1 {}
	.uloppen1 img {width:20px; float:none; display:inline-block;}
	.uloppen1 img[alt="closearrow"] {display:none;}
	.flipopen img[alt="closearrow"] {display:inline-block;}
	.flipopen img[alt="openarrow"] {display:none;}
	
	.maincontent ul.daytable {margin:0 0 15px; display:none;}
	.maincontent ul.daytable li {width:calc(33.3% - 30px); margin:0 15px 30px;}	
	.maincontent ul.dayone li {min-height:400px;}
	.maincontent ul.daytwo li {min-height:420px;}
	.maincontent ul.dayfour li:nth-child(3) {min-height:380px;}
	
	.daytable table {}
	.daytable table tr {font-weight:900;}
	.dayone table tr:first-child {background:#98c8de;}
	.daytwo table tr:first-child {background:#98c8de;}
	.daythree table tr:first-child {background:#98c8de;}
	.dayfour table tr:first-child {background:#98c8de;}
	.dayfive table tr:first-child {background:#98c8de;}
	.daysix table tr:first-child {background:#98c8de;}
	
	.daytable table tr td {padding:5px 0; text-align:center; border:1px solid #cccccc;}
	.daytable table tr td:first-child {width:50px;}
	.daytable table tr td:last-child {width:calc(100% - 54px);}
	

	/*1300*/
	@media screen and (max-width:1300px){		


	/*header*/
	#header {margin-top:35px; padding:0 0 10px;}

	/*mainmenu*/
  #mainmenu {width:100%;margin:0;}
	#mainmenu ul li a {padding:10px 10px;}

	#mobile-navigation ul li a span span {margin:0 0 0 10px !important; }

	/*maincontent*/
	.maincontent {width:calc(100% - 40px);padding:0 10px 20px;margin:15px 10px 30px;min-height:64vh;}
			
	/*footer*/
	#footer {
		padding:15px 10px 0; 
		width:calc(100% - 20px);
		background:#fff url(graphics/copyright.webp) left bottom no-repeat;
		background-size:100%; 
	}
			
	/*copyright*/
	.copyright {margin:5px 0 0;}	
	
	
	/*mm-menu*/
	.mm-page {width:100%;float:left;}
	.nav-header {position:fixed !important; top:0px; left:0; width:100% !important; background:#343434 !important; z-index:9999 !important; box-shadow:none;}
	#hamburger:before, #hamburger:after, #hamburger span {background:#fff !important; z-index:99999 !important;}
	#hamburger {top:2px !important;margin:0 0 0 8px !important;}
  		
		
}	






	/*1000*/
	@media screen and (max-width:1000px){	
	/*footer*/
	#footer ul li {width:100%;}

	/*daytable*/
	.maincontent ul.dayfour li:nth-child(3) {min-height:420px;}
}









	/*800*/
	@media screen and (max-width:800px){		

	
	/*home-video*/	
	.home-video iframe {width:100% !important;margin:0 0 10px;}

	/*daytable*/
	.maincontent ul.daytable li {width:calc(50% - 30px); margin:0 15px 30px;}	
	.maincontent ul.dayfour li:nth-child(3) {min-height:280px;}
	
	/*footer*/	
	#footer-body {
		background: url(graphics/footer.webp) right top no-repeat;
		background-size:300px auto;
	}
	
	#footer ul li .spon-info li {width:100%;}
	
	#formmsg {
		padding:5px 0;
		margin:15px 0 0;
		width:100%;
	}
	
}









	/*600*/
	@media screen and (max-width:600px){
	
	/*title*/
	h1, .home-title, .posting-title, .post-title , #catalog_display h1 span , #main_info span , .emailtitle , #albumdetail .main-title , #menu-name , .reg-search-title {font-size:1.75em;line-height:150%;margin:10px 0;}
	h2 {font-size:1.25em;line-height:150%;}

	/*footer*/	
	#footer-body {
		background: url(graphics/footer.webp) right top no-repeat;
		background-size:150px auto;
	}
	
	/*home-info*/
	.home-info .open-english {font-size:1.5em;line-height:150%;}

	/*news-list*/
	.listing-ul li {width:calc(100% - 10px); padding:10px 5px; margin:0;}
		
	.listing-ul li.upc-subject {width:calc(100% - 10px);text-align:center;}
	
	.listing-ul li.upc-more {width:calc(100% - 10px);}	
	.listing-ul li.upc-more a {width:150px;margin:0px calc(50% - 75px) ;}

	/*register-ul*/
	.register-ul {width:calc(100% - 20px); margin:0 10px;}
	
	/*register-form*/
	#register-form {width:calc(100% - 20px); margin:0 10px;}
	
	/*register-list*/
	.maincontent .message {width:calc(100% - 20px); margin:10px 10px 0px;}

	/*reg-searc*/
	.reg-search-content {width:calc(100% - 20px); margin:0 10px;}
	
	/*daytable*/
	.maincontent ul.daytable li {width:100%; margin:0 0 30px;}	
	.maincontent ul.dayone li {min-height:auto;}
	.maincontent ul.daytwo li {min-height:auto;}
	.maincontent ul.dayfour li:nth-child(3) {min-height:auto;}
	









}












	/*480*/
	@media screen and (max-width:480px){

	/*copyright*/
	.copyright {line-height:20px;}

	/*home-info*/
	.home-info .open-english {width:100%; margin:10px 0;}

	/*register-form*/
	.register > div {padding:5px 0; border-bottom:2px solid #cccccc; }
	.register .cell1 {width:100%;font-weight:900;}	
	.register .cell2 {width:100%;}	

	/*register-list*/
	.register-list .cell1 {width:100%;font-weight:900;}	
	.register-list .cell2 {width:100%;}	












}









	/*400*/
	@media screen and (max-width:400px){

	/*logolink*/
	.logolink {width:calc(100% - 20px);;margin:15px 10px 5px;}
	
	/*register-form*/
	.main-button .cancel {width:100%;margin:0 0 10px;}
	.main-button .submit {width:100%;}










}